<template>
  <el-input
    :size="size"
    :type="type"
    :placeholder="placeholder"
    v-bind="$attrs"
    :value="value"
    :disabled="disabled"
    :clearable="clearable"
    :show-password="showPassword"
    :suffix-icon="suffixIcon"
    :prefix-icon="prefixIcon"
    :autosize="autosize"
    :maxlength="maxlength"
    :show-word-limit="showWordLimit"
    :minlength="minlength"
    :autocomplete="autocomplete"
    :autofocus="autofocus"
    @input="inputLoad"
    @blur="$emit('blur')"
    @focus="$emit('focus')"
    @clear="$emit('clear')"
  >
    <template slot="prepend">
      <slot name="prepend" />
    </template>
    <template slot="append">
      <slot name="append" />
    </template>
  </el-input>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'

@Component({
  name: 'MInput'
})
export default class extends Vue {
  @Prop({ default: 'text' }) private type?: string; // i类型
  @Prop({ default: '' }) private size?: string; //
  @Prop({ default: '' }) private suffixIcon?: string; //
  @Prop({ default: '' }) private prefixIcon?: string; //
  @Prop({ default: '' }) private maxlength?: string; //
  @Prop({ default: '' }) private minlength?: string; //
  @Prop({ default: 'off' }) private autocomplete?: string; //
  @Prop({ default: '请输入' }) private placeholder?: string; // placeholder
  @Prop({ required: true }) private value?: string | number; //

  @Prop({ default: false }) private disabled?: boolean;
  @Prop({ default: false }) private clearable?: boolean;
  @Prop({ default: false }) private showPassword?: boolean;
  @Prop({ default: false }) private showWordLimit?: boolean;
  @Prop({ default: false }) private autofocus?: boolean;
  @Prop({ default: false }) private autosize?: boolean | {minRows?:number, maxRows?:number};

  inputLoad(v) {
    this.$emit('input', v)
  }
}
</script>
